<!DOCTYPE html>
<html lang="en">
    <head>
	    <meta charset="utf-8">
	    <title>传智播客·黑马程序员</title>
	    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	    <meta name="apple-mobile-web-app-capable" content="no">
	    <meta name="apple-mobile-web-app-status-bar-style" content="pink">

	     <link rel="stylesheet" href="../css/base.css">
	     <link rel="stylesheet" href="../css/conment.css">
		 <link rel="stylesheet" href="../fonts/iconfont.css">
		 <link rel="stylesheet" href="../css/swiper.min.css">
		 <link rel="stylesheet" href="../css/gooddetail.css">
	</head>
    <body>
		<div class="header">
			<h1 class="mui-title">传智播客.黑马程序员Vue.js</h1>
		</div>
		<div class="content content1">
			<!-- 轮播图 -->
			<div class="swiper-container lbt">
			    <div class="swiper-wrapper">
				    <div class="swiper-slide">
				      	<a href="#">
				        	<img src="../picture/iphonex1.png">
						</a>
					</div>
					<div class="swiper-slide">
				      	<a href="#">
				        	<img src="../picture/iphonex2.png">
						</a>
				  	</div>
				  	<div class="swiper-slide">
				      	<a href="#">
				        	<img src="../picture/iphonex3.png">
						</a>
				  	</div>
				  	<div class="swiper-slide">
				      	<a href="#">
				        	<img src="../picture/iphonex4.png">
						</a>
				  	</div>
				  	<div class="swiper-slide">
				      	<a href="#">
				        	<img src="../picture/iphonex5.png">
						</a>
				  	</div>
			    </div>
			    <div class="swiper-pagination"></div>
  			</div>
			
			<!-- 购买信息-->
			<div class="buy">
				<h3>Apple iPhone X (A1865) 256GB 深空灰色 移动联通电信4G手机</h3>
				<div class="clearfix">
					<p class="price">
						<span>原价：<s>&yen;7299</s></span>
						<span>活动价：<i>&yen;6999</i></span>
					</p>
					<div class="count clearfix">
						<span>购买数量：</span>
						<div class="add">
							<input type="button" value="-" class="decgoods">
							<input type="tel" value="1" class="goodscount">
							<input type="button" value="+" class="addgoods">			
						</div>
					</div>
					<div class="btn buynow">立即购买</div>
					<div class="btn addcar" onclick="alert('功能尚未完善')">加入购物车</div>
				</div>
			</div>

			<!-- 商品参数-->
			<div class="product">
				<p>商品参数</p>
				<img src="../picture/iphonex.dpg" alt="">
			</div>
		</div>
		<!-- 底部导航部分 -->
		<div class="nav">
			<a href="../index.html" class=""><span class="iconfont">&#xe61c;</span><p class="">首页</p></a>
			<a href="goods.html" class="blue"><span class="iconfont">&#xe61d;</span><p class="">商品</p></a>
			<a href="shoppingcar.html"><span class="iconfont">&#xe65c;</span><p class="">购物车</p></a>
			<a href="mycenter.html"><span class="iconfont">&#xe614;</span><p class="">个人中心</p></a>
		</div>
		<!-- 底部导航部分 -->
    </body>
</html>
 <script src="../js/swiper.min.js"></script>
 <script>
    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        // 如果需要分页器
        pagination: {
        	el: '.swiper-pagination',
      	},
    })


    // 商品数量加减
    var decgoods = document.getElementsByClassName("decgoods")[0];
    var addgoods = document.getElementsByClassName("addgoods")[0];
    var goodscount = document.getElementsByClassName("goodscount")[0];

    // 点击减号触发
    decgoods.onclick = function(){
    	if(goodscount.value>1){
    		goodscount.value--;
    	}
    }

    // 点击加号触发
    addgoods.onclick = function(){
    	goodscount.value++
    }


    //点击立即购买
   	var buynows = document.getElementsByClassName("buynow")[0];
   	buynows.onclick=function(){
   		//location.href 可以控制浏览器跳转到指定的页面;
   		location.href="shoppingcar.html";
   	}
  </script>